<template >
   <footer class='footer'>
       <ul>
           <router-link tag='li' to='waimai'>
                <img src="../img/1.png" alt="">
                <span>外卖</span>
           </router-link>
           <router-link tag='li' to='faxian'>
                <img src="../img/2.png" alt="">
                <span>发现</span>
           </router-link>
           <router-link tag='li' to='dingdan'>
                <img src="../img/3.png" alt="">
                <span>订单</span>
           </router-link>
           <router-link tag='li' to='wode'>
                <img src="../img/4.png" alt="">
                <span>我的</span> 
           </router-link>
       </ul>
   </footer>
</template>
<script>
export default{
    data () {
        return {
        }
    },
    components:{
    }
}
</script>
<style scoped lang='less'> 
    footer{
        height:60px;
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        background:#f7f7f7;
        ul{
            display:flex;
            margin:0;
            padding:0;
            height:60px;
            li{
                flex:1;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                list-style:none;
                &.router-link-active{
                  background:#00a8fa;
                }
                img{
                  width:30%;
                  margin-top:5px;
                  height:55%;
                    
                }
                span{
                    font-size:12px;
                }
            }
        }
    }
</style>